<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="`${
      !isEdit ? '新增维修案件' : '修改维修案件 - ' + formData.case_number
    }`"
    :visible="visible"
    :before-close="onClose"
    width="70%"
    :style="{ 'max-height': '100vh' }"
  >
    <div style="max-height: 70vh; overflow-y: auto; padding: 0 30px">
      <el-form
        style="padding: 0 30px"
        ref="form"
        label-width="120px"
        :model="form"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="案件号" prop="case_number">
              <el-input
                placeholder="请输入案件号"
                v-model="form.case_number"
                :disabled="editType"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left: 20px;">
            <el-form-item label="派休单位" prop="maintenancer_name">
              <el-input
                placeholder="请输入派休单位"
                v-model="form.maintenancer_name"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              style="margin-left: -20px"
              label-width="130px"
              label="维修勘验跟踪记录"
              prop="maintenance_record"
            >
              <el-input
                placeholder="请输入维修勘验跟踪记录"
                v-model="form.maintenance_record"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left: 20px;">
            <el-form-item label="维修是否超时" prop="is_overtime">
              <el-radio-group v-model="form.is_overtime">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="维修完成时间" prop="finish_time">
              <el-date-picker
                v-model="form.finish_time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left: 20px;">
            <el-form-item label="垫支人" prop="supporter">
              <el-input
                placeholder="请输入垫支人"
                v-model="form.supporter"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="垫支金额" prop="support_cost">
              <el-input
                placeholder="请输入垫支金额"
                v-model="form.support_cost"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left: 20px;">
            <el-form-item label="垫支时间" prop="support_time">
              <el-date-picker
                v-model="form.support_time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="维修清单预算" prop="maintenance_budget">
              <el-input
                placeholder="请输入维修清单预算"
                v-model="form.maintenance_budget"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left: 30px;">
            <el-form-item
              style="margin-left: -20px"
              label-width="130px"
              label="实际维修清单诀算"
              prop="maintenance_final_accounts"
            >
              <el-input
                placeholder="请输入实际维修清单诀算"
                v-model="form.maintenance_final_accounts"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="维修收款信息" prop="maintenance_payment">
              <el-input
                placeholder="请输入维修收款信息"
                v-model="form.maintenance_payment"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left: 20px;">
            <el-form-item label="专票金额" prop="special_ticket_amount">
              <el-input
                placeholder="请输入专票金额"
                v-model="form.special_ticket_amount"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="税率" prop="tax_rate">
              <el-input
                v-model="form.tax_rate"
                placeholder="请输入税率(默认6%)"
                :disabled="!editType"
              >
                <template slot="append">%</template></el-input
              >
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left: 20px;">
            <el-form-item label="普票金额" prop="general_ticket_amount">
              <el-input
                placeholder="请输入普票金额"
                v-model="form.general_ticket_amount"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合计成本票金额" prop="total_invoice_amount">
              <el-input
                placeholder="请输入合计成本票金额"
                v-model="form.total_invoice_amount"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left: 20px;">
            <el-form-item label="缺票金额" prop="missing_ticket_amount">
              <el-input
                placeholder="请输入缺票金额"
                v-model="form.missing_ticket_amount"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="尾款结算金额" prop="final_payment">
              <el-input
                placeholder="请输入尾款结算金额"
                v-model="form.final_payment"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left: 20px;">
            <el-form-item label="尾款汇款时间" prop="final_payment_time">
              <el-date-picker
                v-model="form.final_payment_time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="维修收款人电话" prop="recipient_phone">
              <el-input
                placeholder="请输入维修收款人电话"
                v-model="form.recipient_phone"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left: 20px;">
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onEnter">提 交</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "serviceEdit",
  components: {},
  data() {
    return {
      form: {},
      rules: {
        case_number: [{ required: true, message: "必需", trigger: ["blur"] }],
      },
      editType: false,
      dialogVisible: false,
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default() {
        return {};
      },
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  created() {},
  computed: {},
  watch: {
    formData(e) {
      this.form = {
        ...e,
      };
    },
    visible(v) {
      v && this.validateReset();
    },
  },
  methods: {
    validateReset() {
      this.$refs.form && this.$refs.form.clearValidate();
    },
    formatDateTimes() {
      const formatDateTime = (dateTime) => {
        return dateTime
          ? new Date(dateTime)
              .toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" })
              .replace(/\//g, "-")
          : "";
      };
      this.form.finish_time = formatDateTime(this.form.finish_time);
      this.form.support_time = formatDateTime(this.form.support_time);
      this.form.final_payment_time = formatDateTime(this.form.final_payment_time);
    },
    onClose() {
      this.$emit("onClose");
    },
    onEnter() {
      this.$refs.form.validate((res) => {
        if (!this.form.id) {
          delete this.form.id;
        }
        if (res) {
          this.formatDateTimes();
          this.$emit("onEnter", this.form);
        }
      });
    },
  },
};
</script>

<style scoped>
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
